<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <!--<button id="redraw">更换数据源</button>-->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class="">定时器管理</h5>
                    <div class="stayRight ">
                        <el-button @click="scheduleList(1)" icon="star-off">刷新</el-button>
                        <el-button type="primary" @click="showMonitor()">新增</el-button>
                        <el-button type="primary" @click="modifySchedule()" :disabled="oDisabled">修改</el-button>
                        <el-button type="primary" @click="delAll()" :disabled="dDisabled">删除</el-button>
                        <el-button type="primary" @click="pause()" :disabled="dDisabled">暂停</el-button>
                        <el-button type="primary" @click="resume()" :disabled="dDisabled">恢复</el-button>
                        <el-button type="primary" @click="run()" :disabled="dDisabled">立即执行</el-button>
                        <el-button ><router-link  :to="'/schedule/scheduleLog'">定时器日志</router-link></el-button>
                    </div>
                    
                </div>
            </section>
            <section class="searchBar">
                <div class="form-inline">
                    <div class="pull-left">
                        <div class="searchIpt">
                            <el-input v-model="searchStr" placeholder="请输入任务ID或bean名称进行搜索"></el-input>
                        </div>
                        <div class="searchbtn">
                            <el-button @click="scheduleList(1,searchStr,10)">搜索</el-button>
                        </div>
                    </div>
                </div>
            </section>
            <section class="tableMain">
                <el-table :data="dataArr" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="jobId" label="任务ID" > </el-table-column>
                    <el-table-column prop="beanName" label="bean名称" > </el-table-column>
                    <el-table-column prop="methodName" label="方法名称" > </el-table-column>
                    <el-table-column prop="params" label="参数" > </el-table-column>
                    <el-table-column prop="cronExpression" label="cron表达式" > </el-table-column>
                    <el-table-column prop="remark" label="备注" > </el-table-column>
                    <el-table-column label="状态" > 
                      <template scope="scope">
                        <el-tag :type="scope.row.status === 0 ? 'success' : scope.row.status === 1 ? 'danger' : 'gray'" close-transition>{{scope.row.statusName}}</el-tag>
                      </template>
                    </el-table-column>
                </el-table>
                <div class="pageSIzeblock">
                    <div class="pullright">
                        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesz" layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
                        </el-pagination>
                    </div>
                    <div class="pullLeft">
                        <!-- 
                        <el-button  size="small" name="button-del" @click="delAll()" :disabled="pdisabled">批量删除</el-button>
                        <el-button  size="small" ><router-link  :to="'/sites/sitesallRule/'">查看全部规则</router-link> </el-button>
                         -->
                    </div>
                </div>

            </section>


            <el-dialog :title="scheduleTitle" :visible.sync="creatDialogVislble" class="customDialog team" :lock-scroll="false">
                <div class="scoreContainer tagCategory">
                    <el-form :model="scheduleForm" :rules="rules" ref="scheduleForm" label-width="120px" class="demo-scheduleForm">
                        <el-form-item label="bean名称" prop="beanName">
                            <el-input v-model="scheduleForm.beanName" placeholder="spring bean名称，如：testTask"></el-input>
                        </el-form-item>
                        <el-form-item label="方法名称" prop="methodName">
                            <el-input v-model="scheduleForm.methodName" placeholder="方法名称"></el-input>
                        </el-form-item>
                        <el-form-item label="参数" prop="params">
                            <el-input v-model="scheduleForm.params" placeholder="参数"></el-input>
                        </el-form-item>
                        <el-form-item label="cron表达式" prop="cronExpression">
                            <el-input v-model="scheduleForm.cronExpression" placeholder="cron表达式：如：0 0 12 * * ?"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="scheduleForm.remark" placeholder="备注"></el-input>
                        </el-form-item>
                    </el-form>
                   
                </div>          
                <span slot="footer" class="dialog-footer">
                    <el-button @click="creatDialogVislble = false">取 消</el-button>
                    <el-button type="primary" @click="creatSubmit('scheduleForm')">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        
    </div>
</template>

<script>
import { queryScheduleList, modifySchedule, modifyStatusOrRun, deleteAll } from '@/api/scheduleData.js'
export default {
  data() {
    return {
      dataArr: null,
      scheduleTitle: '',
      dataAddress: [],
      listLoading: true,
      oDisabled: true,
      dDisabled: true,
      pdisabled: true,
      creatDialogVislble: false,
      currentPage: 1,
      pagesz: 10,
      totalSize: 0,
      hightsetting: false,
      selected: '',
      tpvalue: '',
      searchStr: '',
      multipleSelection: [],
      scheduleForm: {
        beanName: '',
        methodName: '',
        params: '',
        cronExpression: '',
        remark: '',
        status: 0
      },
      rules: {
        beanName: [
          { required: true, message: '请输入bean名称', trigger: 'blur' }
        ],
        methodName: [
          { required: true, message: '请输入方法名称', trigger: 'blur' }
        ],
        cronExpression: [
          { required: true, message: '请输入cron表达式', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.scheduleList(1)
  },
  methods: {
    scheduleList(curr, searchStr, size) {
      this.listLoading = true
      if (size === undefined) {
        size = 10
      }
      var listQuery = { currPage: curr, searchStr: searchStr, pageSize: size }
      queryScheduleList(listQuery).then(response => {
        console.log(response.data)
        this.dataArr = response.data.data
        this.listLoading = false
        this.totalSize = response.data.totalRows
        this.currentPage = curr
        this.pagesz = size
        if (this.dataArr.length) {
          this.dataArr.forEach(function(element) {
            if (element.status === 1) {
              element.statusName = '暂停'
            } else if (element.status === 0) {
              element.statusName = '正常'
            }
          }, this)
        }
      })
    },
    modifySchedule() {
      this.showMonitor(0, this.multipleSelection)
    },
    pause() {
      const idQuery = []
      this.multipleSelection.forEach(function(element) {
        idQuery.push(element.jobId)
      }, this)
      const obj = {
        jobIds: idQuery.join(','),
        status: 1
      }
      this.$confirm('确认暂停任务？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        modifyStatusOrRun(obj).then(response => {
          if (response.data.code === 0) {
            this.scheduleList(1)
            this.$message({
              message: '暂停成功!',
              type: 'success'
            })
          }
        })
      })
      .catch(_ => {})
    },
    resume() {
      const idQuery = []
      this.multipleSelection.forEach(function(element) {
        idQuery.push(element.jobId)
      }, this)
      const obj = {
        jobIds: idQuery.join(','),
        status: 0,
        type: 0
      }
      this.$confirm('确认恢复任务？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        modifyStatusOrRun(obj).then(response => {
          if (response.data.code === 0) {
            this.scheduleList(1)
            this.$message({
              message: '恢复成功!',
              type: 'success'
            })
          }
        })
      })
      .catch(_ => {})
    },
    run() {
      const idQuery = []
      this.multipleSelection.forEach(function(element) {
        idQuery.push(element.jobId)
      }, this)
      const obj = {
        jobIds: idQuery.join(','),
        status: 3
      }
      this.$confirm('确认立刻执行任务？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        modifyStatusOrRun(obj).then(response => {
          if (response.data.code === 0) {
            this.scheduleList(1)
            this.$message({
              message: '执行成功!',
              type: 'success'
            })
          }
        })
      })
      .catch(_ => {})
    },
    showMonitor(index, data) {
      this.creatDialogVislble = true
      if (data !== undefined) {
        this.scheduleTitle = '修改定时器'
        this.scheduleForm = {
          jobId: data[index].jobId,
          beanName: data[index].beanName,
          methodName: data[index].methodName,
          params: data[index].params,
          cronExpression: data[index].cronExpression,
          remark: data[index].remark,
          status: data[index].status
        }
      } else {
        this.scheduleTitle = '创建定时器'
        this.scheduleForm = {
          beanName: '',
          methodName: '',
          params: '',
          cronExpression: '',
          remark: '',
          status: 0
        }
      }
    },
    creatSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          modifySchedule(this.scheduleForm).then(response => {
            console.log(response.data)
            this.dataArr = response.data.data
            this.listLoading = false
            this.creatDialogVislble = false
            this.scheduleList(1)
          })
        }
      })
    },
    sethigh() {
      this.hightsetting = true
    },
    handleSizeChange(val) {
      this.scheduleList(1, '', '', val)
    },
    handleCurrentChange(val) {
      this.scheduleList(val)
    },
    delAll() {
      const idQuery = []
      this.multipleSelection.forEach(function(element) {
        idQuery.push(element.jobId)
      }, this)
      const obj = {
        jobIds: idQuery.join(',')
      }
      this.$confirm('确认删除任务？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        deleteAll(obj).then(response => {
          if (response.data.code === 0) {
            this.scheduleList(1)
            this.$message({
              message: '删除成功!',
              type: 'success'
            })
          }
        })
      })
      .catch(_ => {})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 1) {
        this.pdisabled = false
        this.dDisabled = false
        this.oDisabled = true
      } else if (this.multipleSelection.length === 1) {
        this.pdisabled = false
        this.dDisabled = false
        this.oDisabled = false
      } else {
        this.pdisabled = true
        this.dDisabled = true
        this.oDisabled = true
      }
      console.log(this.multipleSelection, 'multipleSelection')
    }
  }
}
</script>

<style lang="scss">
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
            .refresh{
                float: left;
                margin-right: 10px;
                color: #333;
                border: 1px solid #ddd;
                background-color: #F7F7F7;
            }
            .creatSite{
                float: left;
            }
        }
    }
}
.searchSel{
    width: 150px;
    display: inline-block;
}
.searchIpt{
    width: 350px;
    display: inline-block;
}
.searchbtn{
    width: 100px;
    display: inline-block;
}
.searchBar{
    padding: 0 10px;
}
.tableMain{
    padding: 10px;
}
.typeform{
    display: inline;
    .form-control{
        border: none;
        padding: 0;
        box-shadow:none;
        display: inline;
        height:30px;
        width:60%;
    }
}
.spantype{
    display: inline;
}
.pageSIzeblock{
    overflow: hidden;
    padding: 10px 0;
    .pullright{
        float: right;
    }
}
.statusError{
    color: red;
}
</style>


